<template>
  <a-card title="磁盘监控">
    <a-skeleton v-if="loading" active/>
    <a-row v-else>
      <template v-if="diskInfo && diskInfo.length>0">
        <a-col :span="7" v-for="(item,index) in diskInfo" :key=" 'diskInfo'+index ">
          <dash-chart height="350px" :value="item.restPPT"/>
          <div class="title">{{ item.name }}</div>
        </a-col>
      </template>
    </a-row>
  </a-card>
</template>

<script>
  import { getAction } from '@/api/manage'
  import DashChart from '@comp/echart/DashChart'

  export default {
    name: 'DiskMonitoring',
    components: {
      DashChart
    },
    data() {
      return {
        loading: true,
        description: '磁盘监控',
        // 数据集
        diskInfo: [],
        url: {
          queryDiskInfo: 'sys/actuator/redis/queryDiskInfo'
        }
      }
    },
    created() {
      this.loading = true
      getAction(this.url.queryDiskInfo).then((res) => {
        if (res.success) {
          for (var i = 0; i < res.result.length; i++) {
            res.result[i].restPPT = res.result[i].restPPT / 10
          }
          this.diskInfo = res.result
        }
      }).finally(() => {
        this.loading = false
      })
    }
  }
</script>

<style scoped>
  .title {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    position: relative;
    top: -60px;
  }
</style>
